<template>
	<view class="container">
		<!-- 提交加载 开始-->
		<u-loading-page :loading="pageLoading" loading-mode="spinner" loading-color="#FFFFFF" icon-size="36" font-size="12" color="#FFFFFF" loading-text="Loading···" bg-color="#00000050"></u-loading-page>
		<!-- 提交加载 结束-->
		<view class="heard">
			<!-- 修改点：使用计算属性 backgroundImageUrl 来处理可能的空值 -->
			<view class="heard-BG" :style="{ backgroundImage: backgroundImageUrl }">
				<image class="avatar" :src="userInfo.headUrl===null?'https://www.afbeijing.net/static_resources/assets/morentouxiang.jpg':userInfo.headUrl"  @click="goToRegister(0)"  />
			</view>
			<view class="user-info">
				<text class="user-name">{{ userInfo.fyName }}</text>
				<view class="point-container">
					<image class="point-icon" :src="'https://www.afbeijing.net/static_resources/assets/jifen.png'" />
					<text class="point-number">{{ userInfo.scoreCnt }}</text>
				</view>
			</view>
		</view>
		<view class="main">
			
			<u-transition :show="transitionShow"  mode="fade-left" duration="300">
				<view class="case" @click="goToRegister(1,'200')">
					<u-row gutter="16">
						<!-- <u-col span="6" offset="6">
							<view class="main-bq1">
								已完成
							</view>
						</u-col> -->
					</u-row>
					<u-row gutter="16">
						<u-col span="12">
							<view class="main-case1">
								<view class="name1">
									{{userInfo.agList[0].agName}}
								</view>
								<view class="shuoming1">
									嘟嘟启蒙
								</view>
								<view class="beizhu1">
									建议4-6岁
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-transition>
			<u-transition :show="transitionShow" mode="fade-left" duration="500">
				<view class="case" @click="goToRegister(1,'300')">
					<!-- <u-row gutter="16">
						<u-col span="6" offset="6">
							<view class="main-bq2">
								未完成
							</view>
						</u-col>
					</u-row> -->
					<u-row gutter="16">
						<u-col span="12">
							<view class="main-case2">
								<view class="name2">
									{{userInfo.agList[1].agName}}
								</view>
								<view class="shuoming2">
									儿童法语
								</view>
								<view class="beizhu2">
									建议7-9岁
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-transition>
			<u-transition :show="transitionShow" mode="fade-left" duration="700">
				<view class="case" @click="showPopup()">
					<!-- <u-row gutter="16">
						<u-col span="6" offset="6">
							<view class="main-bq3">
								未购买
							</view>
						</u-col>
					</u-row> -->
					<u-row gutter="16">
						<u-col span="12">
							<view class="main-case3">
								<view class="name3">
									{{userInfo.agList[2].agName}}
								</view>
								<view class="shuoming3">
									少年法语
								</view>
								<view class="beizhu3">
									建议10-12岁
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-transition>
		</view>
		<view class="fixed-buttons">
			<view class="top-floating-button" @click="goToRegister(2)">
				<image src="https://www.afbeijing.net/static_resources/assets/phb.png" mode="widthFix" />
			</view>
			<view class="bottom-floating-button" @click="goToRegister(3)">
				<image src="https://www.afbeijing.net/static_resources/assets/hktj.png" mode="widthFix" />
			</view>
		</view>
		<view v-if="show" class="popup">
			<view class="popup-content">
				<!-- 弹出窗口的内容 -->
				<view class="popup-main">
					<view class="popup-text">您还未注册【少年法语】阶段课程，请联系课程咨询顾问。</view>
					<view class="popup-btn">
						<view class="btn" @click="showPopup()">
							知道了
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading:false,
				transitionShow: false,
				userName: 'Grace',
				userInfo:{
					// 修改点：给 featureUrl 一个默认值，避免未加载数据时为 undefined
					featureUrl: '' 
				},// 用户数据
				points: 100,
				show: false
			}
		},
		computed: {
			// 计算属性：处理背景图片 URL，确保不会因 featureUrl 为 undefined 而报错
			backgroundImageUrl() {
				if (this.userInfo.featureUrl) {
					return `url(${this.userInfo.featureUrl})`;
				} else {
					return 'url()'; // 当 featureUrl 为空时，返回空的 url()
				}
			}
		},
		onLoad() {
			this.userInfo=uni.getStorageSync('userInfo')//获取登录人的信息
			if (!this.userInfo.featureUrl) {
				this.userInfo.featureUrl = '';
			}
		},
		onShow: function() {
			this.userInfo=uni.getStorageSync('userInfo')//获取登录人的信息
			if (!this.userInfo.featureUrl) {
				this.userInfo.featureUrl = '';
			}
			this.transitionShow = true
		},
		onHide: function() {
			this.transitionShow = false
		},
		methods: {
			goToRegister(e,k) {
				console.log(e)
				switch (e) {
					case 0:
						// 我的
						uni.switchTab({
							url: '/src/views/pageMain/pageMine/index'
						});
						break;
					case 1:
						// 岛屿
						uni.navigateTo({
							url: '/src/views/pageHome/index?id='+k
						});
						break;
					case 2:
						// 排行傍
						uni.navigateTo({
							url: '/src/views/pageHome/paihangbang/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					case 3:
						// 好课推荐
						uni.navigateTo({
							url: '/src/views/pageHome/haoketuijian/index' // 这里替换成你实际要跳转的页面路径
						});
						break;
					default:
						break;
				}
			},
			showPopup() {
				this.show = !this.show;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/static/styles/variables.scss";
	.heard-BG{
		width: 125rpx;
		height: 120rpx;
		border-radius: 50%;
		background-size: 100% 100%;
		padding: 10rpx;
		padding-left: 18rpx;
		margin-right: 20rpx;
	}
	.container {
		position: relative;
		background-color: #FFFFFF;
		height: 100vh;
	}

	.heard {
		height: 15%;
		padding-left: 100rpx;
		background-color: #FFB607;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
	}

	@media screen and (min-width: 768px) {
		.heard {
			height: 25%;
		}
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.user-name {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 43rpx;
	}

	.point-container {
		width: 120rpx;
		height: 40rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #FFB607;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.point-icon {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.main {
		margin-top: -30rpx;
		padding: 80rpx;
		background-color: #ffffff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.case {
		margin-bottom: 20rpx;
	}

	.main-bq1 {
		width: 120rpx;
		height: 54rpx;
		color: #ffffff;
		text-align: center;
		font-size: 20rpx;
		line-height: 45rpx;
		background-image: url(#{$bgImageUrl}/assets/ywc.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.main-bq2 {
		width: 120rpx;
		height: 54rpx;
		color: #ffffff;
		text-align: center;
		font-size: 20rpx;
		line-height: 45rpx;
		background-image: url(#{$bgImageUrl}/assets/wwc.png);
		background-size: 100% 100%;
		;
		background-repeat: no-repeat;
	}

	.main-bq3 {
		width: 120rpx;
		height: 54rpx;
		color: #ffffff;
		text-align: center;
		font-size: 20rpx;
		line-height: 45rpx;
		background-image: url(#{$bgImageUrl}/assets/wgm.png);
		background-size: 100% 100%;
		;
		background-repeat: no-repeat;
	}

	.main-case1 {
		width: 100%;
		height: 250rpx;
		margin-top: -20rpx;
		margin-bottom: 20rpx;
		text-align: right;
		padding-top: 70rpx;
		padding-right: 50rpx;
		background-image: url(#{$bgImageUrl}/assets/yyk.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.name1 {
		font-family: Source Han Sans CN;
		font-weight: 800;
		font-size: 54rpx;
		color: #F69908;
		line-height: 54rpx;
	}

	.shuoming1 {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 40rpx;
		color: #F69908;
		line-height: 54rpx;
	}

	.beizhu1 {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 22rpx;
		color: #F69908;
		line-height: 51rpx;
	}

	.main-case2 {
		width: 100%;
		height: 250rpx;
		margin-top: -15rpx;
		margin-bottom: 20rpx;
		text-align: right;
		padding-top: 70rpx;
		padding-right: 50rpx;
		background-image: url(#{$bgImageUrl}/assets/hhk.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.name2 {
		font-family: Source Han Sans CN;
		font-weight: 800;
		font-size: 54rpx;
		color: #27985F;
		line-height: 54rpx;
	}

	.shuoming2 {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 40rpx;
		color: #27985F;
		line-height: 54rpx;
	}

	.beizhu2 {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 22rpx;
		color: #27985F;
		line-height: 51rpx;
	}

	.main-case3 {
		width: 100%;
		height: 250rpx;
		margin-top: -10rpx;
		text-align: right;
		padding-top: 70rpx;
		padding-right: 50rpx;
		background-image: url(#{$bgImageUrl}/assets/xnk.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.name3 {
		font-family: Source Han Sans CN;
		font-weight: 800;
		font-size: 54rpx;
		color: #1281EE;
		line-height: 54rpx;
	}

	.shuoming3 {
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 40rpx;
		color: #1281EE;
		line-height: 54rpx;
	}

	.beizhu3 {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 22rpx;
		color: #1281EE;
		line-height: 51rpx;
	}

	.fixed-buttons {
		position: fixed;
		margin-bottom: 100rpx;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-floating-button {
		position: absolute;
		bottom: 150rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-floating-button {
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		backdrop-filter: blur(1rpx); // 增加模糊效果
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		height: 350rpx;
		width: 500rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		background-image: url(#{$bgImageUrl}/assets/tishikuang.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
	}

	.popup-main {
		margin-top: 30%;
	}

	.popup-text {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.popup-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 30rpx;
	}

	.btn {
		width: 180rpx;
		height: 50rpx;
		background: #FFFFFF;
		border-radius: 25rpx;

		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		font-size: 27rpx;
		color: #FF8106;
		line-height: 50rpx;
	}
</style>